<template>
  <div
      :class="[
      'document-item-card',
      `style-${style}`,
      { 'completed': item.completed },
      'editable'
    ]"
      @dblclick="handleDoubleClick"
  >
    <!-- 海报风格 -->
    <template v-if="style === 'poster'">
      <div class="poster-content">
        <div class="poster-background"></div>
        <div class="poster-overlay">
          <div class="item-header">
            <h4 v-if="item.name && item.name.trim()" class="item-title">
              <img v-if="item.isTop" class="top-icon" title="置顶" src="@/assets/icon/top.svg" alt="置顶"/>
              {{ item.name }}
            </h4>
            <div class="item-header-right">
              <div v-if="item.starRating && item.starRating > 0" class="item-rating-inline">
                <span v-for="star in 5" :key="star" class="rating-star">
                  {{ star <= item.starRating ? '★' : '☆' }}
                </span>
              </div>
            </div>
          </div>
          <div v-if="item.content && item.content.trim()" class="item-content">
            <slot name="content" :item="item">
              <MarkdownRenderer :content="item.content" :theme="markdownTheme"/>
            </slot>
          </div>
          <div class="poster-quote">
            <div class="quote-mark">"</div>
          </div>
        </div>
        <!-- 悬浮操作按钮 -->
        <div class="floating-actions">
          <slot name="actions" :item="item"></slot>
        </div>
      </div>
    </template>

    <!-- 卡片风格 -->
    <template v-else-if="style === 'card'">
      <div class="card-content">
        <div class="item-header">
          <h4 v-if="item.name && item.name.trim()" class="item-title">
            <img v-if="item.isTop" class="top-icon" title="置顶" src="@/assets/icon/top.svg" alt="置顶"/>
            {{ item.name }}
          </h4>
          <div class="item-header-right">
            <div v-if="item.starRating && item.starRating > 0" class="item-rating-inline">
              <span v-for="star in 5" :key="star" class="rating-star">
                {{ star <= item.starRating ? '★' : '☆' }}
              </span>
            </div>
          </div>
        </div>
        <div v-if="item.content && item.content.trim()" class="item-content">
          <slot name="content" :item="item">
            <MarkdownRenderer :content="item.content" :theme="markdownTheme"/>
          </slot>
        </div>
        <!-- 悬浮操作按钮 -->
        <div class="floating-actions">
          <slot name="actions" :item="item"></slot>
        </div>
      </div>
    </template>

    <!-- 简约风格 -->
    <template v-else-if="style === 'minimal'">
      <div class="minimal-content">
        <div class="item-header">
          <h4 v-if="item.name && item.name.trim()" class="item-title">
            <img v-if="item.isTop" class="top-icon" title="置顶" src="@/assets/icon/top.svg" alt="置顶"/>
            {{ item.name }}
          </h4>
          <div class="item-header-right">
            <div v-if="item.starRating && item.starRating > 0" class="item-rating-inline">
              <span v-for="star in 5" :key="star" class="rating-star">
                {{ star <= item.starRating ? '★' : '☆' }}
              </span>
            </div>
          </div>
        </div>
        <div v-if="item.content && item.content.trim()" class="item-content">
          <slot name="content" :item="item">
            <MarkdownRenderer :content="item.content" :theme="markdownTheme"/>
          </slot>
        </div>
        <!-- 悬浮操作按钮 -->
        <div class="floating-actions">
          <slot name="actions" :item="item"></slot>
        </div>
      </div>
    </template>

    <!-- 时间线风格 -->
    <template v-else-if="style === 'timeline'">
      <div class="timeline-content">
        <div class="timeline-marker"></div>
        <div class="timeline-card">
          <div class="item-header">
            <h4 v-if="item.name && item.name.trim()" class="item-title">
              <img v-if="item.isTop" class="top-icon" title="置顶" src="@/assets/icon/top.svg" alt="置顶"/>
              {{ item.name }}
            </h4>
            <div class="item-header-right">
              <div v-if="item.starRating && item.starRating > 0" class="item-rating-inline">
                <span v-for="star in 5" :key="star" class="rating-star">
                  {{ star <= item.starRating ? '★' : '☆' }}
                </span>
              </div>
            </div>
          </div>
          <div v-if="item.content && item.content.trim()" class="item-content">
            <slot name="content" :item="item">
              <MarkdownRenderer :content="item.content" :theme="markdownTheme"/>
            </slot>
          </div>
          <!-- 悬浮操作按钮 -->
          <div class="floating-actions">
            <slot name="actions" :item="item"></slot>
          </div>
        </div>
      </div>
    </template>

    <!-- 默认风格 -->
    <template v-else>
      <div class="default-content">
        <div class="item-header">
          <div v-if="item.name && item.name.trim()" class="item-title">
            <img v-if="item.isTop" class="top-icon" title="置顶" src="@/assets/icon/top.svg" alt="置顶"/>
            {{ item.name }}
          </div>

          <div class="item-header-right">
            <div v-if="item.starRating && item.starRating > 0" class="item-rating-inline">
              <span v-for="star in 5" :key="star" class="rating-star">
                {{ star <= item.starRating ? '★' : '☆' }}
              </span>
            </div>
          </div>
        </div>

        <div v-if="item.content && item.content.trim()" class="item-content">
          <slot name="content" :item="item">
            <MarkdownRenderer :content="item.content" :theme="markdownTheme"/>
          </slot>
        </div>
        <!-- 悬浮操作按钮 -->
        <div class="floating-actions">
          <slot name="actions" :item="item"></slot>
        </div>
      </div>
    </template>
  </div>
</template>

<script setup lang="ts">
import type {DocumentItem} from '@/modules/doc/types/doc.ts'
import type {MarkdownTheme} from '@/components/MarkdownRenderer.vue'
import MarkdownRenderer from '../../../components/MarkdownRenderer.vue'
import type {ItemStyleType} from '@/components/ItemStyleSelector.vue'

interface Props {
  item: DocumentItem
  style?: ItemStyleType
  markdownTheme?: MarkdownTheme
}

const props = withDefaults(defineProps<Props>(), {
  style: 'default',
  markdownTheme: 'classic'
})

const emit = defineEmits<{
  edit: [item: DocumentItem]
}>()

const handleDoubleClick = () => {
  emit('edit', props.item)
}
</script>

<style scoped>
.document-item-card {
  transition: all 0.2s ease;
  margin-bottom: 1rem;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

/* 可编辑卡片样式 */
.document-item-card.editable {
  cursor: pointer;
}

.document-item-card.editable:hover {
  transform: scale(1.01);
}

/* 默认风格样式 */
.style-default .default-content {
  background: white;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 1rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.style-default:hover .default-content {
  border-color: #42b883;
  box-shadow: 0 2px 8px rgba(66, 184, 131, 0.1);
}

/* 海报风格样式 */
.style-poster .poster-content {
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  min-height: 300px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.style-poster .poster-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(135deg,
  rgba(173, 216, 230, 0.9) 0%,
  rgba(240, 248, 255, 0.9) 25%,
  rgba(255, 182, 193, 0.8) 50%,
  rgba(221, 160, 221, 0.8) 75%,
  rgba(135, 206, 235, 0.9) 100%
  );
  backdrop-filter: blur(10px);
}

.style-poster .poster-overlay {
  position: relative;
  z-index: 2;
  padding: 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  color: #2c3e50;
}

.style-poster .item-title {
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  margin-bottom: 1.5rem;
  color: #2c3e50;
  text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.style-poster .item-content {
  flex: 1;
  font-size: 1.1rem;
  line-height: 1.8;
  text-align: center;
  color: #2c3e50;
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.7);
}

.style-poster .poster-quote {
  position: absolute;
  top: 1rem;
  right: 1.5rem;
}

.style-poster .quote-mark {
  font-size: 3rem;
  color: rgba(255, 255, 255, 0.6);
  font-family: serif;
}

.style-poster:hover .poster-content {
  transform: translateY(-2px);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}

/* 卡片风格样式 */
.style-card .card-content {
  background: white;
  border-radius: 12px;
  padding: 1.5rem;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(0, 0, 0, 0.06);
  position: relative;
  overflow: hidden;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.style-card .card-content::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #42b883, #369870);
}

.style-card:hover .card-content {
  transform: translateY(-4px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.style-card .item-title {
  color: #2c3e50;
  margin-bottom: 1rem;
  font-weight: 600;
}

/* 简约风格样式 */
.style-minimal .minimal-content {
  background: transparent;
  border: none;
  border-left: 3px solid #42b883;
  padding: 1rem 1rem 1rem 1.5rem;
  margin-left: 0.5rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.style-minimal .item-title {
  color: #2c3e50;
  font-size: 1.1rem;
  font-weight: 500;
  margin-bottom: 0.5rem;
}

.style-minimal .item-content {
  color: #666;
  font-size: 0.95rem;
}

.style-minimal:hover .minimal-content {
  border-left-color: #369870;
  background: rgba(66, 184, 131, 0.02);
}

/* 时间线风格样式 */
.style-timeline {
  position: relative;
  padding-left: 3rem;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.style-timeline .timeline-content {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.style-timeline .timeline-marker {
  position: absolute;
  left: 0;
  top: 1rem;
  width: 12px;
  height: 12px;
  background: #42b883;
  border-radius: 50%;
  border: 3px solid white;
  box-shadow: 0 0 0 2px #42b883;
}

.style-timeline::before {
  content: '';
  position: absolute;
  left: 6px;
  top: 2rem;
  bottom: -1rem;
  width: 2px;
  background: #e1e1e1;
}

.style-timeline:last-child::before {
  display: none;
}

.style-timeline .timeline-card {
  background: white;
  border: 1px solid #e1e1e1;
  border-radius: 8px;
  padding: 1rem;
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.style-timeline .timeline-card::before {
  content: '';
  position: absolute;
  left: -8px;
  top: 1rem;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: white;
}

.style-timeline .timeline-card::after {
  content: '';
  position: absolute;
  left: -9px;
  top: 1rem;
  width: 0;
  height: 0;
  border: 8px solid transparent;
  border-right-color: #e1e1e1;
}

/* 通用样式 */
.item-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.top-icon {
  display: inline-block;
  margin-right: 0.5rem;
  width: 16px;
  height: 16px;
  animation: pulse 2s infinite;
  vertical-align: baseline;
  filter: invert(36%) sepia(67%) saturate(1392%) hue-rotate(14deg) brightness(93%) contrast(89%);
}

@keyframes pulse {
  0% {
    transform: translateY(-1px) scale(1);
  }
  50% {
    transform: translateY(-1px) scale(1.1);
  }
  100% {
    transform: translateY(-1px) scale(1);
  }
}

.item-title {
  margin: 0;
  font-weight: 600;
  flex: 1;
  text-align: center;
  display: flex;
  align-items: center;
}

.item-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.item-rating-inline {
  display: flex;
  align-items: center;
}

.item-rating-inline .rating-star {
  font-size: 0.9rem;
  color: #ffd700;
}

/* 确保卡片容器不会干扰下拉菜单层级 */
.document-item-card {
  position: relative;
  z-index: 1;
}

/* 悬浮操作按钮样式 */
.floating-actions {
  position: absolute;
  top: 8px;
  right: 8px;
  opacity: 0;
  transition: all 0.2s ease;
  z-index: 200;
  display: flex;
  gap: 0.25rem;
}

.document-item-card:hover .floating-actions {
  opacity: 1;
}

.item-content {
  margin-top: 0.5rem;
  padding: 0;
  background: transparent;
  border: none;
  flex: 1;
}

/* 完成状态样式 */
.completed {
  opacity: 0.7;
}

.completed .item-title {
  text-decoration: line-through;
  color: #999;
}

.completed .item-content {
  opacity: 0.6;
}

/* 深色主题适配 */
.dark .style-default .default-content,
.dark .style-card .card-content,
.dark .style-timeline .timeline-card {
  background: #2d2d2d;
  border-color: #3d3d3d;
  color: #e6e6e6;
}

.dark .item-title {
  color: #e6e6e6;
}

.dark .style-minimal .item-title {
  color: #e6e6e6;
}

.dark .style-minimal .item-content {
  color: #b3b3b3;
}

.dark .style-poster .poster-overlay {
  color: #2c3e50;
}

.dark .style-poster .item-title,
.dark .style-poster .item-content {
  color: #2c3e50;
}

.dark .style-timeline::before {
  background: #3d3d3d;
}

.dark .style-timeline .timeline-card::before {
  border-right-color: #2d2d2d;
}

.dark .style-timeline .timeline-card::after {
  border-right-color: #3d3d3d;
}

.dark .completed .item-title {
  color: #666;
}

.dark .top-icon {
  filter: brightness(0) invert(1);
}

/* 移动端适配 */
@media (max-width: 768px) {
  .style-poster .poster-overlay {
    padding: 1.5rem;
  }

  .style-poster .item-title {
    font-size: 1.2rem;
  }

  .style-poster .item-content {
    font-size: 1rem;
    line-height: 1.6;
  }

  .floating-actions {
    opacity: 1;
    top: 6px;
    right: 6px;
  }

  .item-header {
    flex-direction: column;
    gap: 0.5rem;
    align-items: flex-start;
  }

  .style-timeline {
    padding-left: 2rem;
  }

  .style-timeline .timeline-marker {
    left: -0.5rem;
  }

  .style-timeline::before {
    left: -0.25rem;
  }
}
</style>